<template>
  <div class="activityDetail text-line-height">
    <div class="crumbs-box">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/activity/list?tabsName=Live' }">活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>在线课程详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="margin30">
      <div class="block-height">
        <div class="fl text-line-height">
          <div class="fl marginL10 fs-22 fw">{{ listData.title }}</div>
        </div>
        <div v-if="isFromReport" class="fr">
          <el-button v-if="this.$route.query.status === 'unprocessed'" type="warning">违规</el-button>
        </div>
        <div v-else class="fr">
          <el-button
            v-if="listData.manageState === 'UNAUDITED'"
            type="primary"
            size="medium"
            plain
            @click="getAudit('passed')"
          >通过</el-button>
          <el-button
            v-if="listData.manageState === 'UNAUDITED'"
            type="primary"
            size="medium"
            @click="getAudit('not_passed')"
          >不通过</el-button>
          <el-button type="primary" size="medium" plain @click="journal">查看日志</el-button>
          <el-button type="primary" size="medium" @click="revise">修改</el-button>

          <el-button
            v-if="listData.manageState === 'NORMAL' || listData.manageState === 'UNAUDITED'"
            type="warning"
            size="medium"
            @click="getProcessStatus('disable_content')"
          >违规</el-button>
          <el-button v-else type="warning" size="medium" @click="getProcessStatus('enable')">取消违规</el-button>

          <el-button type="danger" size="medium" @click="getDeleteLiveDetail">删除</el-button>
        </div>
      </div>
      <div class="marginL10">
        <el-row class="el-row">
          <el-col :span="11" class="pr10">
            <el-col :span="24">
              <div class>
                <!--
                  NOT_STARTED(未开始), ONGOING(进行中), END(已结束), VIOLATE(违规), UNAUDITED(待审核)
                -->
                <el-tag v-if="listData.status === 'NOT_STARTED'" size="small" type="danger">未开始</el-tag>
                <el-tag v-if="listData.status === 'ONGOING'" size="small" type="danger">进行中</el-tag>
                <el-tag v-if="listData.status === 'END'" size="small" type="danger">已结束</el-tag>
                <el-tag v-if="listData.status === 'VIOLATE'" size="small" type="danger">违规</el-tag>
                <el-tag v-if="listData.status === 'UNAUDITED'" size="small" type="danger">待审核</el-tag>
              </div>
              <div class="fs-12">
                <span class="marginL10">
                  <span v-if="listData.phase">{{ listData.phase.itemName }}/</span>
                  <span v-if="listData.subject">{{ listData.subject.itemName }}</span>
                </span>
                <span
                  v-if="listData.teachingTarget"
                  class="marginL10"
                >在线课程对象：{{ listData.teachingTarget.itemName }}</span>
              </div>

              <div
                v-if="listData.categoryArr && listData.categoryArr.length > 0"
                class="block-height text-line-height"
              >
                <el-tag
                  v-for="(tag, tagIndex) in listData.categoryArr"
                  :key="tagIndex"
                  type="success"
                  effect="dark"
                  size="mini"
                  class="marginL10"
                >{{ tag.tagsName }}</el-tag>
              </div>
              <div>
                <el-image :src="listData.coverImg" />
              </div>
            </el-col>
            <el-col :span="24">
              <div>
                <span class="fs-16 fw">课程详情</span>
                <br />
                <p v-html="listData.atvDescribe" />
                <!-- <span class="fs-12 line-height20">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span> -->
              </div>
              <!-- <div>
                <el-image
                  class="img-style-size"
                  src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
                />
              </div>
              <div>
                <el-image
                  class="img-style-size"
                  src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
                />
              </div>
              <div>
                <el-image
                  class="img-style-size"
                  src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
                />
              </div>-->
            </el-col>
            <!-- <el-col :span="24">
              <div>
                <span class="fs-16 fw">教学过程</span>
                <br />
                <span
                  class="fs-12 line-height20"
                >内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span>
              </div>
              <div>
                <img src="#" alt />
              </div>
            </el-col>-->
          </el-col>
          <el-col class="pl30" :offset="2" :span="11">
            <el-col :span="24">
              <div>
                <span class="fs-16 fw">发布人</span>
              </div>
              <div class="avatar-box-style">
                <el-avatar shape="square" size="large" :src="listData.userInfo.avatarUrl" />
                <div class="user-info-right pl10 line-height20">
                  <p>
                    {{ listData.userInfo.name }}
                    <span
                      v-if="listData.userInfo && listData.userInfo.title === 'PRIMARY'"
                      class="fs-12"
                    >一级教师</span>
                    <span
                      v-if="listData.userInfo && listData.userInfo.title === 'SECONDARY'"
                      class="fs-12"
                    >二级教师</span>
                    <span
                      v-if="listData.userInfo && listData.userInfo.title === 'TERTIARY'"
                      class="fs-12"
                    >三级教师</span>
                    <span
                      v-if="listData.userInfo && listData.userInfo.title === 'SENIOR'"
                      class="fs-12"
                    >高级教师</span>
                    <span
                      v-if="listData.userInfo && listData.userInfo.title === 'POSITIVE_SENIOR'"
                      class="fs-12"
                    >正高级教师</span>

                    <el-button type="text" class="marginL50">查看详情</el-button>
                  </p>
                  <p
                    v-if="listData.userInfo &&listData.userInfo.school"
                    class="fs-14"
                  >{{ listData.userInfo.school }}</p>
                  <span class="fs-12">
                    <span
                      v-if="listData.userInfo && listData.userInfo.subject && listData.userInfo.subject.length > 0"
                    >{{ listData.userInfo.subject[0] }}:</span>
                    <span
                      v-if="listData.userInfo && listData.userInfo.goodAtLabels && listData.userInfo.goodAtLabels.length > 0"
                    >
                      <el-tag
                        v-for="(tagItem, tagInx) in listData.userInfo.goodAtLabels"
                        :key="tagInx"
                        type="success"
                        effect="dark"
                        size="mini"
                        class="marginL10"
                      >{{ tagItem }}</el-tag>
                    </span>
                  </span>
                  <br />
                  <span class="fs-12">
                    <span v-if="listData.userInfo.isTrainer">培训师:</span>
                    <span v-else>师范生:</span>
                    <span
                      v-if="listData.userInfo && listData.userInfo.trainSpecialityLabels && listData.userInfo.trainSpecialityLabels.length > 0"
                    >
                      <el-tag
                        v-for="(tagItem, tagInx) in listData.userInfo.trainSpecialityLabels"
                        :key="tagInx"
                        type="success"
                        effect="dark"
                        size="mini"
                        class="marginL10"
                      >{{ tagItem }}</el-tag>
                    </span>
                  </span>
                </div>
              </div>
            </el-col>
            <el-col class="marginT30" :span="24">
              <div>
                <el-tag
                  v-if="listData.userInfo.countViolate!=null"
                  size="medium"
                  effect="plain"
                >违规 {{ listData.userInfo.countViolate }} 次</el-tag>
                <el-tag
                  v-if="listData.userInfo.countTipOffed!=null"
                  size="medium"
                  type="warning"
                  effect="plain"
                >被举报 {{ listData.userInfo.countTipOffed }} 次</el-tag>
              </div>
            </el-col>
            <el-col class="marginT30" :span="24">
              <div>
                <span class="fs-16 fw">报名人</span>
              </div>
              <div
                v-if="enrollList &&enrollList.length > 0"
                class="line-height20 marginB10"
                style="height: 380px; overflow-y: auto;"
              >
                <div v-infinite-scroll="load" :infinite-scroll-disabled="loading">
                  <div
                    v-for="(enrollItem,enrollInx) in enrollList"
                    :key="enrollInx"
                    class="avatar-box-style border-b marginT10"
                  >
                    <el-avatar
                      style="width: 60px;height: 60px;"
                      size="large"
                      :src="enrollItem.avatarUrl"
                    />
                    <div class="user-info-right pl10 line-height20">
                      <p class="line-height30">
                        <span class="fw">{{ enrollItem.name }}</span>
                        <!-- <span class="fs-12">(真实姓名)</span> -->
                        <br />
                        <!-- <span class="fs-12">初级教师</span>
                        <span class="marginL10">学校名称XXXXX</span>-->
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-col>
        </el-row>
        <div class="marginT30 el-card-size">
          <Comment
            :list="listData"
            :sub-id="$route.query.param"
            tabs-name="second"
            sub-type="WEB_CAST"
            :count-comment="listData.commentNum"
            :count-view="listData.viewNum"
            :count-share="listData.shareNum"
          />
        </div>
      </div>
    </div>

    <Journal :dialog-visible="journalVisible" :dialog-obj="journalObj" @Callback="getJournalCall" />
  </div>
</template>

<script>
import Journal from '@/components/Journal/index';
import { getLiveDetail, audit, processStatus, deleteLiveDetail, enroll } from '@/api/activity';
import { getUserInfo } from '@/api/users';
import Comment from '@/components/Comment/index';
export default {
  name: 'ReportDetail',
  components: {
    Journal,
    Comment
  },
  data () {
    return {
      isFromReport: this.$route.query && this.$route.query.report ? this.$route.query.report : false,

      listData: {
        activityId: null,
        atvDescribe: null,
        categoryList: [],
        createTime: null,
        endTime: null,
        enrollFee: null,
        extType: null,
        parentId: null,
        quota: null,
        startTime: null,
        status: null,
        statusName: null,
        tagList: [],
        title: null,
        userId: null,
        userName: null,
        userInfo: {
          avatarUrl: null,
          name: null
        }
      },

      enrollList: [],
      enrollTotal: null,
      loading: false,
      enrollQuery: {
        condition: this.$route.query.param,
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      journalVisible: false,
      journalObj: {
        sysEnums: null,
        targetId: null,
        userId: null
      }
    };
  },
  created () {
    this.init();
    this.getEnroll();
  },
  methods: {
    // 日志
    journal () {
      this.journalObj = {
        sysEnums: [],
        targetId: this.$route.query.param,
        userId: null
      };
      this.journalVisible = true;
    },
    getJournalCall (obj) {
      this.journalVisible = obj;
    },

    // 获取参与者列表
    load () {
      // console.log('触发', this.enrollList.length, this.enrollList);
      if (this.enrollList.length < this.enrollTotal) {
        this.enrollQuery.pager.page += 1;
        this.getEnroll();
      }
    },
    getEnroll () {
      this.loading = true;
      enroll(this.enrollQuery)
        .then(res => {
          this.enrollList = this.enrollList.concat(res.data.records);
          // console.log('参与人列表:', this.enrollList);
          this.enrollTotal = res.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    // 审核 通过/不通过
    getAudit (auditResult) {
      audit({
        result: auditResult,
        targetId: this.listData.activityId
      }).then(res => {
        // console.log(res.data);
        this.$message({
          message: '操作成功',
          type: 'success'
        });
        // this.listData[index].status = notShow ? 'NOT_SHOW' : 'OK';
      });
    },
    // 审核 违规/取消违规
    getProcessStatus (targetType) {
      processStatus({
        result: targetType,
        targetId: this.listData.activityId,
        targetType: 'web_cast'
      }).then(res => {
        var manageState;
        switch (targetType) {
          case 'disable_content':
            manageState = 'VIOLATE';
            break;
          case 'enable':
            manageState = 'NORMAL';
            break;
        }
        this.listData.manageState = manageState;

        this.$message({
          message: '操作成功',
          type: 'success'
        });
      });
    },

    // 删除详情
    getDeleteLiveDetail () {
      // console.log(deleteLiveDetail);
      const msg = '确认是否删除该详情！';
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteLiveDetail(this.listData.activityId).then(res => {
            this.$router.push({
              path: '/activity/list',
              params: {
                tabsName: 'Live'
              }
            });
          });
        })
        .catch(() => {
          // 取消操作
          console.log('cancel');
        });
    },

    // 修改
    revise () {
      // console.log(this.listData.status);
      if (this.listData.status === 'END') {
        this.$message.error('活动已结束!');
      } else {
        this.$router.push({
          path: '/activity/liveEditOrAdd',
          query: { param: this.listData.activityId }
        });
      }
    },
    async init () {
      await getLiveDetail(this.$route.query.param).then(res => {
        res.data.categoryArr = [];
        var toArr = arr => {
          var newArr = [];
          arr.map(item => {
            newArr = newArr.concat(item.tagList);
          });
          return newArr;
        };
        if (res.data.categoryList && res.data.categoryList.length > 0) {
          var categoryArr = toArr(res.data.categoryList);
          categoryArr.map(item => {
            res.data.categoryArr.push(item);
          });
        }
        // console.log('详情:', res.data);
        this.listData = res.data;
      });
    }

  }
};
</script>

<style scoped lang="scss">
.img-style-size {
  width: 100%;
  height: 130px;
  padding: 5px;
  background: #eeeeee;
  border: solid #eeeeee 1px;
}
.block-height {
  height: 40px;
}
.text-line-height {
  line-height: 40px;
}
.avatar-size {
  width: 40px;
  height: 40px;
}
.text-line-height-30 {
  line-height: 30px;
}
.el-card-size {
  width: 700px;
}
.el-row-size {
  width: 700px;
  height: 100px;
}
.text-indent {
  text-indent: 50px;
}
.el-tab-pane-size {
  height: 700px;
  overflow: auto;
}

.activityDetail {
  .el-button {
    margin-left: 10px;
  }
}
</style>
